<?php
/**
 * SocialEngine
 *
 * @category   Application_Extensions
 * @package    Vote
 * @copyright  Copyright 2011 KEENONWEB LLC
 * @license    http://www.keenonweb.com/
 * @version    $Id: _fancyUploadMusic.tpl 2011-03-09 01:11:30 idris $
 * @author     Idris
 */
?>
  
<?php
  $this->headScript()
    ->appendFile($this->baseUrl() . '/externals/fancyupload/Swiff.Uploader.js')
    ->appendFile($this->baseUrl() . '/externals/fancyupload/Fx.ProgressBar.js')
    ->appendFile($this->baseUrl() . '/externals/fancyupload/FancyUpload2.js')
    ->appendFile($this->baseUrl() . '/externals/fancyupload/FancyUpload2.js');
  $this->headLink()
    ->appendStylesheet($this->baseUrl() . '/externals/fancyupload/fancyupload.css');
  $this->headTranslate(array(
    'Overall Progress ({total})', 'File Progress', 'Uploading "{name}"',
    'Upload: {bytesLoaded} with {rate}, {timeRemaining} remaining.', '{name}',
    'Remove', 'Click to remove this entry.', 'Upload failed',
    '{name} already added.',
    '{name} ({size}) is too small, the minimal file size is {fileSizeMin}.',
    '{name} ({size}) is too big, the maximal file size is {fileSizeMax}.',
    '{name} could not be added, amount of {fileListMax} files exceeded.',
    '{name} ({size}) is too big, overall filesize of {fileListSizeMax} exceeded.',
    'Server returned HTTP-Status <code>#{code}</code>',
    'Security error occurred ({text})',
    'Error caused a send or load operation to fail ({text})',
  ));
?>

<script type="text/javascript">
  var uploadCount = 0;
  var uploaderSwf = '<?php echo $this->baseUrl() . '/externals/fancyupload/Swiff.Uploader.swf' ?>'
  window.addEvent('domready', function() {
    var up = new FancyUpload2($('demo-status'), $('demo-list'), {

      verbose: <?php echo ( APPLICATION_ENV == 'development' ? 'true' : 'false') ?>,
      appendCookieData: true,
      multiple: false,

      url: $('form-upload-music').action + '?ul=1',

      path: uploaderSwf,

      typeFilter: {
        'Music (*.mp3,*.m4a,*.aac,*.mp4)': '*.mp3; *.m4a; *.aac; *.mp4'
      },

      target: 'demo-browse',

      onLoad: function() {
        $('demo-status').removeClass('hidden');
        $('demo-fallback').destroy();
        $('buttons-wrapper').addClass('hidden');

        this.target.addEvents({
          click: function() {
            return false;
          },
          mouseenter: function() {
            this.addClass('hover');
          },
          mouseleave: function() {
            this.removeClass('hover');
            this.blur();
          },
          mousedown: function() {
            this.focus();
          }
        });

        if ($('submit-wrapper'))
          $('submit-wrapper').hide();
        $('demo-clear').addEvent('click', function() {
          up.remove();
          if ($('fancyuploadfileids'))
            $('fancyuploadfileids').value = '';
          return false;
        });
      },

      onSelectFail: function(files) {
        files.each(function(file) {
          new Element('li', {
            'class': 'validation-error',
            html: file.validationErrorMessage || file.validationError,
            title: MooTools.lang.get('FancyUpload', 'removeTitle'),
            events: {
              click: function() {
                this.destroy();
              }
            }
          }).inject(this.list, 'top');
        }, this);
      },

      onComplete: function hideProgress() {
        var demostatuscurrent = document.getElementById("demo-status-current");
        var demostatusoverall = document.getElementById("demo-status-overall");
        var demosubmit = document.getElementById("submit-wrapper");
        $('buttons-wrapper').removeClass('hidden');

        demostatuscurrent.style.display = "none";
        demostatusoverall.style.display = "none";
        if (demosubmit)
          demosubmit.style.display = "block";
      },

      onFileStart: function() {
        uploadCount += 1;
      },

      onFileRemove: function(file) {
        uploadCount -= 1;
        file_id = file.song_id;
        request = new Request.JSON({
          'format' : 'json',
          'url' : '<?php echo $this->url(array('action' => 'remove-file', 'controller' => 'vote'), 'vote_general') ?>',
          'data': {
            'format': 'json',
            'song_id' : file_id
          },
          'onSuccess' : function(responseJSON) {
            $('demo-browse').removeClass('hidden');
            $('demo-clear').removeClass('hidden');
            $('buttons-wrapper').addClass('hidden');
            return false;
          }
        });
        request.send();
        var fileids = $('fancyuploadfileids');

        if ($("demo-list").getChildren('li').length == 0)
        {
          var democlear  = document.getElementById("demo-clear");
          var demolist   = document.getElementById("demo-list");
          var demosubmit = document.getElementById("submit-wrapper");
          democlear.style.display  = "none";
          demolist.style.display   = "none";
          demosubmit.style.display = "none";
        }

        if (fileids)
          fileids.value = fileids.value.replace(file_id, "");
      },

      onSelectSuccess: function(file) {
        $('demo-list').style.display = 'block';
        var democlear = document.getElementById("demo-clear");
        var demostatuscurrent = document.getElementById("demo-status-current");
        var demostatusoverall = document.getElementById("demo-status-overall");

        democlear.style.display = "inline";
        demostatuscurrent.style.display = "block";
        demostatusoverall.style.display = "block";
        $('demo-browse').addClass('hidden');
        $('demo-clear').addClass('hidden');
        up.start();
      },

      onFileSuccess: function(file, response) {
        var json = new Hash(JSON.decode(response, true) || {});

        if (json.get('status')) {
          file.element.addClass('file-success');
          file.info.set('html', '<span>' + '<?php echo $this->string()->escapeJavascript($this->translate('Upload complete.')) ?>' + '</span>');
          file.song_id = json.get('song_id');
          $('id').value = file.song_id;
          $('buttons-wrapper').removeClass('hidden');
        } else {
          file.element.addClass('file-failed');
          file.info.set('html', '<span><?php echo $this->string()->escapeJavascript($this->translate('An error occurred:')) ?></span> ' + (json.get('error') ? (json.get('error')) : response));
        }
      },

      onFail: function(error) {
        switch (error) {
          case 'hidden':
            alert('<?php echo $this->string()->escapeJavascript($this->translate("To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).")) ?>');
            break;
          case 'blocked':
            alert('<?php echo $this->string()->escapeJavascript($this->translate("To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).")) ?>');
            break;
          case 'empty':
            alert('<?php echo $this->string()->escapeJavascript($this->translate("A required file was not found, please be patient and we'll fix this.")) ?>');
            break;
          case 'flash':
            alert('<?php echo $this->string()->escapeJavascript($this->translate("To enable the embedded uploader, install the latest Adobe Flash plugin.")) ?>');
            break;
        }
      }
    });
  });
</script>

<fieldset id="demo-fallback">
  <legend><?php echo $this->translate("File Upload") ?></legend>
  <p>
    <?php echo $this->translate('vote_music_upload_music_descr') ?>
  </p>
  <label for="demo-musiclabel">
    <?php echo $this->translate('Upload Music:') ?>
    <input id="<?php echo $this->element->getName() ?>"
           type="file"
           name="<?php echo $this->element->getName() ?>"
           value="<?php echo $this->element->getValue() ?>" />

  </label>
</fieldset>

<div id="demo-status" class="hidden">
  <div>
    <?php echo $this->translate('vote_MUSIC_UPLOAD_DESCRIPTION') ?>
  </div>
  <div>
    <a class="buttonlink icon_music_new" href="javascript:void(0);" id="demo-browse"><?php echo $this->translate('Add Music') ?></a>
    <a class="buttonlink icon_clearlist" href="javascript:void(0);" id="demo-clear"><?php echo $this->translate('Clear List') ?></a>
  </div>
  <div class="demo-status-overall" id="demo-status-overall" style="display:none">
    <div class="overall-title"></div>
    <img src="<?php echo $this->baseUrl() . '/externals/fancyupload/assets/progress-bar/bar.gif'; ?>" class="progress overall-progress" alt="" />
  </div>
  <div class="demo-status-current" id="demo-status-current" style="display:none">
    <div class="current-title"></div>
    <img src="<?php echo $this->baseUrl() . '/externals/fancyupload/assets/progress-bar/bar.gif'; ?>" class="progress current-progress" alt="" />
  </div>
  <div class="current-text"></div>
</div>

<ul id="demo-list"></ul>